<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="vue_flow_show" content="">
    <title>流程管理</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 3px;
            cursor: pointer;
            color: #606266;
        }

        .hovered {
            background-color: #e0e0e0;
            /* 鼠标悬停时的背景颜色 */
        }

        .clicked {
            background-color: #b0e0e6;
            /* 点击时的背景颜色 */
        }

        .footer-bar {
            height: 45px;
            width: 100%;
            position: fixed;
            /* 修改为 fixed 定位 */
            top: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            color: #666;

            display: flex;
            justify-content: space-between;
            padding: 0 10px 0 10px;
        }

        .title_div {
            display: flex;
            align-items: center;
        }

        .title_img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .ellipsis-text {
            width: fit-content;
            max-width: 14ch;
            /* 最多显示 7 个字符宽度 */
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
        }

        .button-icon {
            margin-right: 5px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <div class="footer-bar">
            <div class="title_div">
                <img class="title_img" src="menu.svg" alt=""></img>
                <h2>流程设计</h2>
            </div>
        </div>
        <div style="margin-top: 45px;">
            <div>
                <ul id="flowListUl"></ul>
            </div>
        </div>
    </div>
    <script>
        const flowListUl = document.getElementById('flowListUl');

        // 假设接口地址
        const apiUrl = 'https://example.com/api/flowList';

        const flowList = [
            { name: '流程1' },
            { name: '流程2' },
        ];

        fetch(apiUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })

        const getList = (item) => {
            return new Promise((resolve, reject) => {
                // 模拟异步请求
                setTimeout(() => {
                    resolve(item);
                }, 1000);
            });
        }

        const createList = (flowList) => {
            flowList.forEach((item, index) => {
                const li = document.createElement('li');
                li.style.marginBottom = '5px';
                li.style.borderRadius = '8px';
                li.style.display = 'flex';
                li.style.justifyContent = 'space-between';
                li.style.alignItems = 'center';
                li.style.fontSize = '16px';

                const ellipsisText = document.createElement('div');
                ellipsisText.classList.add('ellipsis-text');
                ellipsisText.title = item.name;
                ellipsisText.textContent = item.name;

                li.appendChild(ellipsisText);

                const runButton = document.createElement('button');
                runButton.style.border = 'none';
                runButton.style.cursor = 'pointer';

                // 创建 img 元素来显示 SVG 图标
                const imgIcon = document.createElement('img');
                imgIcon.src = 'start.svg';
                imgIcon.alt = '启动图标';
                imgIcon.style.width = '20px';
                imgIcon.style.height = '20px';
                imgIcon.classList.add('button-icon');
                runButton.appendChild(imgIcon);

                runButton.addEventListener('click', () => {
                    console.log('运行流程：' + item.name);
                    window.location.href = `StartFlow://${item.name}`;
                });

                li.appendChild(ellipsisText);
                li.appendChild(runButton);
                flowListUl.appendChild(li);
            });

            const listItems = document.querySelectorAll('li');
            listItems.forEach(item => {
                item.addEventListener('mouseover', () => {
                    item.classList.add('hovered');
                });
                item.addEventListener('mouseout', () => {
                    item.classList.remove('hovered');
                });
                item.addEventListener('click', () => {
                    listItems.forEach(li => li.classList.remove('clicked'));
                    item.classList.add('clicked');
                });
            });
        }

        createList(flowList);

    </script>
</body>

</html>